<template>
  <div
    :style="{ height: height + 'px', width: width + 'px' }"
    class="menu-wrapper"
  >
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-name"
      >{{title}}</div>
      <div class="title-more" @click="jumpToPage">更多</div>
    </div>
    <div class="menu-box" :style="{ background: backColor }">
      <div :style="{height:'100%',width:'100%'}"/>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getChartData } from "@/api/custom/portalDesigner";
import {getMenu} from '@/api/system/menu';
import {getHomePage} from '@/api/login'
require("echarts/theme/macarons"); // echarts theme
const animationDuration = 6000;

export default {
  props: {
    width: {
      type: Number,
      default: "500",
    },
    height: {
      type: Number,
      default: "300",
    },
    title: {
      type: String,
      default: "柱状图",
    },
    backColor: {
      type: String,
      default: "#ffffff",
    },
    dataCoordinate: {
      type: String,
      default: "Y轴",
    },
    tableName: {
      type: String,
      dafault: "",
    },
    xField: {
      type: String,
      dafault: "",
    },
    yField: {
      type: String,
      dafault: "",
    },
    CNameField:{
      type:String,
      default:''
    },
    CDataField:{
      type:String,
      default:''
    },
    jumpTo: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      //value轴拿到的数组值
      seriesData: [],
      //xAxis和yxAxis
      x: {
        type: "category",
        data: [],
        axisTick: {
          alignWithLabel: true,
        },
      },
      y: {
        type: "value",
        axisTick: {
          show: false,
        },
      },
    };
  },
  mounted() {
    if(this.xField){
      this.getAxisData(this.xField, "x");
    }
    if(this.yField){
      this.getAxisData(this.yField, "y");
    }
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    width(val) {
      if (this.chart) {
        this.chart.resize({ width: val, height: this.height-40 });
      }
    },
    height(val) {
      if (this.chart) {
        this.chart.resize({ width: this.width, height: val-40 });
      }
    },
    dataCoordinate(val) {
      this.setChart();
    },
    xField: {
      handler(val) {
        this.getAxisData(val, "x");
      },
    },
    yField: {
      handler(val) {
        this.getAxisData(val, "y");
      },
    },
    x: {
      handler(val) {
        this.setChart();
      },
    },
    y: {
      handler(val) {
        this.setChart();
      },
    },
    seriesData: {
      handler(val) {
        this.setChart();
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el.children[1], "macarons");
      this.chart.resize({ width: this.width, height: this.height-40 });
    },

    //界面跳转
    async jumpToPage() {
      const flag = this.$store.state.currentStep.clickFlag
      if(flag){
        let toUrl = ''
        await getHomePage().then(res => {
          toUrl= res.data.path
        }).catch(error => {
          console.log(error)
        })
        let urls = []
        let res = null
        while (true) {
          res = await getMenu(res ? res.data.parentId : this.jumpTo)
          if (res.code === 0) {
            if (res.data) {
              urls.push(res.data.path)
              if (res.data.parentId === 0) {
                break
              }
            } else {
              break
            }
          }
        }
        if (urls.length > 0) {
          toUrl = urls.reverse().join('/')
        }
        this.$router.push(toUrl)
      } 
    },
    //获取x轴/y轴数据
    getAxisData(value, axis) {
      if (!value) {
        this.x.data= []
        this.seriesData=[]
      } else {
        let params = {
          tableName: this.tableName,
          fieldNameX: this.xField,
          fieldNameY:this.yField
        };
        if(this.tableName&&this.xField&&this.yField){
          getChartData(params)
            .then((res) => {
              if (res.code === 0) {
                  let temp = {
                    ...this.x,
                    data:res.data.X
                  }
                  this.x = temp;
                  this.seriesData = res.data.Y
              }
            })
            .catch((e) => console.log(e));
        }
      }
    },
    setChart() {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: '{b} <br/>{a} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: this.dataCoordinate === "Y轴" ? this.x : this.y,
        yAxis: this.dataCoordinate === "Y轴" ? this.y : this.x,
        series: [
          {
            name: this.CDataField,
            type: "bar",
            barWidth: "60%",
            data: this.seriesData,
            animationDuration,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-wrapper {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  .menu-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .title-line {
      margin: 0 10px;
      width: 5px;
      height: 20px;
      background: #409eff;
    }
    .title-name {
      width:calc(100% - 50px);
      padding-right:2% ;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .title-more {
      width: 45px;
      float: right;
      right: 0px;
      color: #409eff;
    }
  }
  .menu-box {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>